import * as echarts from 'echarts'
import 'echarts-gl'
export const $echarts = echarts

import Echart from "./index.vue"
export const EchartComponent = Echart

import {unref, onBeforeUnmount} from "vue"

const toolbox = {
    show: false,
}
export const tooltip = {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,0)",
    borderWidth: 0,
    padding: 0,
    className:"echart-tooltip",
    textStyle: {
        color: "#fff",
        fontSize: 16
    },
    position: function (pos, params, dom, rect, size) {
        let [
            x,
            y
        ] = pos;
        let {
            viewSize:[
                viewWidth,
                viewHeight,
            ],
            contentSize:[
                contentWidth,
                contentHeight,
            ],
        } = size;
        let padding = 5;
        return {
            top: (
                contentHeight > viewHeight
                    ?
                        (viewHeight - contentHeight) * (y / viewHeight)
                    :
                        y > viewHeight / 2
                            ?
                                contentHeight + padding > y 
                                    ?
                                        padding
                                    :
                                        y - contentHeight - padding
                            :
                                contentHeight + padding + y > viewHeight
                                    ?
                                        viewHeight - contentHeight - padding
                                    :
                                        y + padding
            ),
            left: (
                contentWidth > viewWidth
                    ?
                        (viewWidth - contentWidth) * (x / viewWidth)
                    :
                        x > viewWidth / 2
                            ?
                                contentWidth + padding > x 
                                    ?
                                        padding
                                    :
                                        x - contentWidth - padding
                            :
                                contentWidth + padding + x > viewWidth
                                    ?
                                        viewWidth - contentWidth - padding
                                    :
                                        x + padding
            )

        };
    },
    // *2
    // formatter: (a, b, c) => {
    //     if(Object.prototype.toString.call(a).slice(8,-1) === "Array"){
    //         return a[0].name == ""
    //             ? ""
    //             : `
    //             <div style="padding:24px 40px 24px 24px; position:relative; background-color: rgba(0,0,0,.5); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);">
    //                 <div style="position:absolute; left:0; top:0; right:0; bottom:0; background-color: #a2d1f0; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 21.5px, calc(100% - 21.5px) 2px, 2px 2px, 2px calc(100% - 2px), 0 calc(100% - 2px))"></div>
    //                 <div style="font-size:32px;">${a[0].name}</div>
    //                 ${(() => {
    //                     return a.map((item) => {
    //                         return `
    //                                 <div style="display:flex; align-items:center; margin-top:30px;">
    //                                     <div style="transform:translateY(-3px) scale(2.8);">${item.marker}</div>
    //                                     <div class="flex-1" style="margin:0 40px; font-size:40px;">${item.seriesName}:</div>
    //                                     <div style="color:#6ce3fb; font-size:40px;">${item.value}</div>
    //                                     ${
    //                                         item.percent !== undefined
    //                                             ?
    //                                                 `<div style="color:#6ce3fb; font-size:40px; margin-left:40px;">${item.percent}%</div>`
    //                                             :
    //                                                 ""
    //                                     }
    //                                 </div>
    //                             `;
    //                         }).join("");
    //                 })()}
    //             </div>
    //         `;
    //     }else{
    //         return a.name == ""
    //             ? ""
    //             : `
    //             <div style="padding:24px 40px 24px 24px; position:relative; background-color: rgba(0,0,0,.5); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);">
    //                 <div style="position:absolute; left:0; top:0; right:0; bottom:0; background-color: #a2d1f0; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 21.5px, calc(100% - 21.5px) 2px, 2px 2px, 2px calc(100% - 2px), 0 calc(100% - 2px))"></div>
    //                 ${a.seriesName && `<div style="font-size:32px;">${a.seriesName}</div>`}
    //                 <div style="display:flex; align-items:center; ${a.seriesName && `margin-top:30px;`}">
    //                     <div style="transform:translateY(-3px) scale(2.8);">${a.marker}</div>
    //                     <div class="flex-1" style="margin:0 40px; font-size:40px;">${a.name}:</div>
    //                     <div style="color:#6ce3fb; font-size:40px;">${a.value}</div>
    //                     ${
    //                         a.percent !== undefined
    //                             ?
    //                                 `<div style="color:#6ce3fb; font-size:40px; margin-left:40px;">${a.percent}%</div>`
    //                             :
    //                                 ""
    //                     }
    //                 </div>
    //             </div>
    //         `;
    //     }

    // },
    // *1
    formatter: (a, b, c) => {
        console.log(a)
        if(Object.prototype.toString.call(a).slice(8,-1) === "Array"){
            return a[0].name == ""
                ? ""
                : `
                <div style="padding:12px 20px 12px 12px; position:relative; background-color: rgba(0,0,0,.5); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);">
                    <div style="position:absolute; left:0; top:0; right:0; bottom:0; background-color: #a2d1f0; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 21.5px, calc(100% - 21.5px) 2px, 2px 2px, 2px calc(100% - 2px), 0 calc(100% - 2px))"></div>
                    <div style="font-size:18px;">${a[0].name}</div>
                    ${(() => {
                        return a.map((item) => {
                            return `
                                    <div style="display:flex; align-items:center; margin-top:15px;">
                                        <div style="transform:translateY(-2px) scale(1.4);">${item.marker}</div>
                                        <div class="flex-1" style="margin:0 10px; font-size:20px;">${item.seriesName}:</div>
                                        <div style="color:#6ce3fb; font-size:20px;">${item.value}</div>
                                        ${
                                            item.percent !== undefined
                                                ?
                                                    `<div style="color:#6ce3fb; font-size:20px; margin-left:20px;">${item.percent}%</div>`
                                                :
                                                    ""
                                        }
                                    </div>
                                `;
                            }).join("");
                    })()}
                </div>
            `;
        }else{
            return a.name && a.seriesName == ""
                ? ""
                : `
                <div style="padding:12px 20px 12px 12px; position:relative; background-color: rgba(0,0,0,.5); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);">
                    <div style="position:absolute; left:0; top:0; right:0; bottom:0; background-color: #a2d1f0; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 21.5px, calc(100% - 21.5px) 2px, 2px 2px, 2px calc(100% - 2px), 0 calc(100% - 2px))"></div>
                    ${a.seriesName && `<div style="font-size:18px;">${a.seriesName}</div>`}
                    <div style="display:flex; align-items:center; ${a.seriesName && `margin-top:15px;`}">
                        <div style="transform:translateY(-2px) scale(1.4);">${a.marker}</div>
                        <div class="flex-1" style="margin:0 10px; font-size:20px;">${a.name}:</div>
                        <div style="color:#6ce3fb; font-size:20px;">${a.value}</div>
                        ${
                            a.percent !== undefined
                                ?
                                    `<div style="color:#6ce3fb; font-size:20px; margin-left:20px;">${a.percent}%</div>`
                                :
                                    ""
                        }
                    </div>
                </div>
            `;
        }
    },
}
const legend = {
    show: true,
    type: 'scroll',
    top: 8,
    left: 0,
    itemGap: 8,
    itemWidth: 20,
    itemHeight: 9,
    textStyle: {
      color: "#3F7DE5",
      fontSize: 14,
    },
}
const grid = {
    left: 10,
    top: 10,
    bottom: 10,
    right: 10,
}
export function useEchart(option={}, updataIntercept){
    let myChart = null
    let chartOption = {
        tooltip,
        toolbox,
        // grid,
        // legend,
        ...option,
    }
    function getChart(){
        return myChart;
    }
    function clear(...arg){
        myChart && myChart.clear(...arg);
    }
    function setOption(...arg){
        chartOption = arg[0];
        myChart && myChart.setOption(...arg);
    }
    function getOption(...arg){
        myChart && myChart.getOption(...arg);
    }
    function registerEchart(dom){
        setTimeout(() => {
            myChart = $echarts.init(unref(dom));
            if(nextUpdata){
                nextUpdata()
            }else{
                setOption(chartOption, false, true);    
            }
            nextUpdata = null;
        },10)
    }
    let nextUpdata = () => {};
    function updata(...arg){
        if(nextUpdata){
            nextUpdata = () => {
                setOption(updataIntercept(...arg, chartOption) || chartOption, false, true);
            }            
        }else{
            setOption(updataIntercept(...arg, chartOption) || chartOption, false, true);
        }
    }
    onBeforeUnmount(function(){
        myChart && myChart.dispose();
    })
    return {
        registerEchart,
        getChart,
        clear,
        setOption,
        getOption,
        updata
    };
}